<template>
  <div class="page-container">
    <md-app>

      <md-app-toolbar class="md-primary">
        <md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
          <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">{{title}}</span>
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible" >
        <md-toolbar class="md-transparent" md-elevation="0">
          <span></span>

          <div class="md-toolbar-section-end">
            <md-button class="md-icon-button md-dense" @click="toggleMenu">
              <md-icon>keyboard_arrow_left</md-icon>
            </md-button>
          </div>
        </md-toolbar>

        <md-list>
          <md-list-item @click="changeTitle('首页')">
            <md-icon>home</md-icon>
            <router-link class="md-list-item-text" to="/home">首页</router-link>
          </md-list-item>

          <md-list-item @click="changeTitle('日志')">
            <md-icon>send</md-icon>
            <router-link class="md-list-item-text" to="/journal">日志</router-link>
          </md-list-item>
          <!-- 分割线 -->
          <md-divider></md-divider>
        <!--  &lt;!&ndash; 刷新 &ndash;&gt;
          <md-list-item >
            <md-icon>sync</md-icon>
            <router-link class="md-list-item-text" to="">Last sync: 2019/5/2</router-link>
          </md-list-item>-->

          <md-list-item @click="changeTitle('反馈')">
            <md-icon>feedback</md-icon>
            <router-link class="md-list-item-text" to="/feedback">反馈</router-link>
          </md-list-item>
          <!-- 退出登陆 -->
          <md-list-item @click="showConfirm">
            <md-icon>all_out</md-icon>
            <router-link class="md-list-item-text" @click="showConfirm" to="" >注销</router-link>
            <!--<md-button class="md-list-item-text" @click="active = true">sign out</md-button>-->
          </md-list-item>
        </md-list>
      </md-app-drawer>

      <md-app-content >
        <!--确认框-->
        <md-dialog-confirm
          :md-active.sync="active"
          md-title="退出登陆?"
          md-content="注销登陆，将清除所有本地任务。你想继续吗"
          md-confirm-text="是"
          md-cancel-text="否"
          @md-cancel="onCancel"
          @md-confirm="signOut" />

        <!-- 提示框-->
        <Message ref="mes"></Message>
        <!-- 进度框 -->
        <md-progress-spinner v-if="processShow" :md-diameter="100" :md-stroke="10" md-mode="indeterminate"></md-progress-spinner>
        <router-view></router-view>
      </md-app-content>

    </md-app>
  </div>
</template>

<script>
  import Dexie from 'dexie/dist/dexie'
  import Message from '@/components/Message'
  import {taskDb} from '@/util/dao/ConfigDB'
  require('vue-material')
  export default {
    name: 'app',
    components: {
      Message
    },
    data: () => ({
      menuVisible: false,
      active: false, // 是否显示注销登陆确认框
      processShow: false,
      title: '首页'
    }),
    methods: {
      /**
       * 改变每页的标题
       * @param title
       */
      changeTitle (title) {
        this.title = title
        this.menuVisible = !this.menuVisible
      },
      toggleMenu () {
        this.menuVisible = !this.menuVisible
      },
      showConfirm () {
        this.toggleMenu()
        this.active = true
      },
      signOut () {
        // todo 将待同步的请求执行了
        let workboxBackgroundSync = new Dexie('workbox-background-sync')
        if (workboxBackgroundSync.needSyncRquestQueue !== null && workboxBackgroundSync.needSyncRquestQueue !== undefined) {
          workboxBackgroundSync.needSyncRquestQueue.count().then((response) => {
            if (response > 0) {
              this.$refs.mes.message({content: '为了确保所有的本地数据保存到远程服务器上，请确保网络畅通', position: 'center', showMsg: true})
            } else {
              // todo 将LocalStorage的数据清空
              this.processShow = true
              taskDb.delete().then((response) => {
                this.processShow = false
                localStorage.removeItem('token')
                localStorage.removeItem('userId')
                this.$router.push({name: 'login'})
              })
            }
          })
        } else {
          // todo 将LocalStorage的数据清空
          this.processShow = true
          taskDb.delete().then((response) => {
            this.processShow = false
            localStorage.removeItem('token')
            localStorage.removeItem('userId')
            this.$router.push({name: 'login'})
          })
        }
      },
      onCancel () {
        // nothing to do
      }
    }
  }
</script>

<style lang="scss" >
  @import url('https:////fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons');

  .md-app {
    border: 1px solid rgba(#000, .12);
    min-height: 700px;
  }

  .md-app-toolbar {
    height: 100px;
  }

  // Demo purposes only
  .md-drawer {
    width: 230px;
    max-width: calc(100vw - 125px);
  }


</style>
